<template>
  <div id="public-map">
    <!-- 地图容器 -->
    <div id="container"></div>
  </div>
</template>

<script>

import axios from 'axios'

export default {
  name: 'PublicMap',
  data() {
    return {
      result: [],
      url: {
        queryLocation: '/web/bizOrderSite/queryCustLocation'
      },
      info: {},
      showPop: false
    }
  },
  methods: {
    loadMap() {
      var map = new AMap.Map('container', {
        zoom: 14,
        resizeEnable: true
      })

      // 添加点和窗体
      this.result.forEach((item, i) => {
        console.log('item')
        console.log(item)
        if (item.lonAndLat) {
          let arrayLonAndLat = item.lonAndLat.split(',');
          let trans = this.trans(Number(arrayLonAndLat[0]),Number(arrayLonAndLat[1]))
          let marker = new AMap.Marker({
            map: map,
            position: [trans[1],trans[0]]
          })

          marker.on('click', (e) => {
            this.info = item
            this.$set(this.info, 'index', i)
            this.showPop = true

            let contentStr = '<div>'

            for (let key in item) {
              if ('lonAndLat' === key || 'siteName' === key || 'locations' === key || 'index' === key) {
                continue
              }
              contentStr += `<p>${key}：${item[key]}</p>`
            }
            contentStr += '</div>'

            let infoWindow = new AMap.InfoWindow({
              offset: new AMap.Pixel(0, -30),
              content: contentStr
            })
            infoWindow.open(map, e.target.getPosition())
          })

          marker.emit('click', { target: marker })
        }
      })
      map.setFitView()
    },
    searchQuery() {
      // this.result =  [
      //   {
      //     "id": "1525003076406652929",
      //     "siteName": "空港包场厂",
      //     "location": "106.63886319953995,29.75185306322082"
      //   },
      //   {
      //     "id": "1526746939655761922",
      //     "siteName": "仙桃塞义再生资源中心",
      //     "location": "113.41969534438478,30.32986726554412"
      //   },
      //   {
      //     "id": "1527267426781708290",
      //     "siteName": "长沙环丰再生资源利用有限公司",
      //     "location": "113.04402247397668,28.109513357600772"
      //   },
      //   {
      //     "id": "1529052863066095618",
      //     "siteName": "贵州创塑园再生资源有限公司",
      //     "location": "106.68037038333534,26.262922583751354"
      //   }]

      let url = `http://8.141.163.122:8092/rsdc/map/mapList`
      const redirect = this.$route.query.redirect
      let querySid = "123"
      if (redirect !== undefined && redirect !== null){
        const params = new URLSearchParams(redirect.split("?")[1]); // 获取 ? 之后的部分
        querySid = params.get("sid");
      }

      if (querySid !== undefined && querySid !== '' && querySid !== 'undefined') {
        try {
          axios.get("http://localhost:3000", {
            headers: {
              sid: querySid
            }
          }).then((res1) => {
            let res =
            {
              "status": 200,
              "result": {
              "data": [
                {
                  "lonAndLat": "120.111,30.123",
                  "站点名称": "浙江省杭州市滨江区三维大厦",
                  "客户数量": "0",
                  "当天收货金额": "0",
                  "当天收货重量": "0",
                  "采购数量": 0,
                  "销售数量": 0
                },
                {
                  "lonAndLat": "120.161800,30.191390",
                  "站点名称": "浙江省杭州市滨江区宝龙城",
                  "客户数量": "0",
                  "当天收货金额": "0",
                  "当天收货重量": "0",
                  "采购数量": 0,
                  "销售数量": 0
                },
                {
                  "lonAndLat": "120.135761,30.173366",
                  "站点名称": "浙江省杭州市滨江区浙新小区",
                  "客户数量": "0",
                  "当天收货金额": "0",
                  "当天收货重量": "0",
                  "采购数量": 0,
                  "销售数量": 0
                },
                {
                  "lonAndLat": "120.212515,30.191394",
                  "站点名称": "浙江省杭州市滨江区春波南苑",
                  "客户数量": "0",
                  "当天收货金额": "0",
                  "当天收货重量": "0",
                  "采购数量": 0,
                  "销售数量": 0
                },
                {
                  "lonAndLat": "120.205990,30.193154",
                  "站点名称": "浙江省杭州市滨江区春波小区",
                  "客户数量": "0",
                  "当天收货金额": "0",
                  "当天收货重量": "0",
                  "采购数量": 0,
                  "销售数量": 0
                },
                {
                  "lonAndLat": "120.209275,30.194608",
                  "站点名称": "浙江省杭州市滨江区春波西苑",
                  "客户数量": "0",
                  "当天收货金额": "0",
                  "当天收货重量": "0",
                  "采购数量": 0,
                  "销售数量": 0
                },
                {
                  "lonAndLat": "120.168838,30.167150",
                  "站点名称": "浙江省杭州市滨江区火炬小区",
                  "客户数量": "8",
                  "当天收货金额": "0",
                  "当天收货重量": "0",
                  "采购数量": 0,
                  "销售数量": 0
                }
              ]
            }
            }

            if (res.status === 200) {
              let array = res.result.data;
              this.result = array //
            } else {
              this.$notification.warn({
                message: '提示',
                description: '获取地理编码失败: ' + res.data.msg,
                duration: 5
              })
            }
            this.loadMap()
          })
        } catch (error) {
          this.$notification.warn({
            message: '提示',
            description: `解析地点数据失败`,
            duration: 5
          })
        }
      } else {
        this.$notification.warn({
          message: '提示',
          description: `地址信息有误`,
          duration: 5
        })
      }
      this.loadMap()
    },


    trans(lon, lat) {
      // 定义一些常量
      const PI = 3.141592653589793
      const AXIS = 6378245.0 // 长半轴
      const OFFSET = 0.00669342162296594323 // 扁率

// 判断是否在中国范围
      function isInChina(lat, lon) {
        return !(lon < 72.004 || lon > 137.8347 || lat < 0.8293 || lat > 55.8271)
      }

// 转换纬度
      function transformLat(x, y) {
        let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
        ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0
        ret += (20.0 * Math.sin(y * PI) + 40.0 * Math.sin(y / 3.0 * PI)) * 2.0 / 3.0
        ret += (160.0 * Math.sin(y / 12.0 * PI) + 320 * Math.sin(y * PI / 30.0)) * 2.0 / 3.0
        return ret
      }

// 转换经度
      function transformLon(x, y) {
        let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
        ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0
        ret += (20.0 * Math.sin(x * PI) + 40.0 * Math.sin(x / 3.0 * PI)) * 2.0 / 3.0
        ret += (150.0 * Math.sin(x / 12.0 * PI) + 300.0 * Math.sin(x / 30.0 * PI)) * 2.0 / 3.0
        return ret
      }

// WGS84 转 GCJ-02
      function wgs84ToGcj02(lat, lon) {
        if (!isInChina(lat, lon)) {
          // 不在中国范围，返回原始坐标
          return [lat, lon]
        }
        let dLat = transformLat(lon - 105.0, lat - 35.0)
        let dLon = transformLon(lon - 105.0, lat - 35.0)
        const radLat = lat / 180.0 * PI
        let magic = Math.sin(radLat)
        magic = 1 - OFFSET * magic * magic
        const sqrtMagic = Math.sqrt(magic)
        dLat = (dLat * 180.0) / ((AXIS * (1 - OFFSET)) / (magic * sqrtMagic) * PI)
        dLon = (dLon * 180.0) / (AXIS / sqrtMagic * Math.cos(radLat) * PI)
        const mgLat = lat + dLat
        const mgLon = lon + dLon
        return [mgLat, mgLon]
      }

// 示例调用
//       const tianDiTuCoord = [39.9042, 116.4074]; // 北京天地图坐标 (WGS84)
      const gaodeCoord = wgs84ToGcj02(lat, lon)
      console.log('高德坐标:', gaodeCoord)
      return gaodeCoord
    }
  },
  mounted() {

    this.searchQuery()
  }
}
</script>

<style scoped>
#public-map {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

#container {
  height: 100%;
  width: 100%;
}
</style>
